<template>
  <div class="tab-detail">
    <Form ref="form" :rules="formValidate" :label-width="140" :model="form">
      <FormItem prop="image" :label-width="50">
        <div
          style="width:100%;margin-bottom:10px;height:230px;border: 1px dashed #dcdee2;"
        >
          <img
            style="width:100%;height:230px"
            :src="
              form.image
                ? form.image
                : 'https://img0.baidu.com/it/u=699973849,3290692557&fm=26&fmt=auto'
            "
          />
        </div>
      </FormItem>
      <FormItem label="编号" prop="sn">
        <Input v-model="form.sn" readonly />
      </FormItem>
      <FormItem label="气候环境" prop="atmosphereId">
        <Select v-model="form.atmosphereId" disabled>
          <Option
            :value="it.id"
            v-for="it in dataArray.atmosphere"
            :key="it.id"
            >{{ it.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="路面" prop="groupId">
        <Select v-model="form.groupId" disabled>
          <Option :value="it.id" v-for="it in dataArray.road" :key="it.id">{{
            it.name
          }}</Option>
        </Select>
      </FormItem>
      <FormItem label="行驶工况" prop="drivecycleId">
        <Select v-model="form.drivecycleId" disabled>
          <Option
            :value="it.id"
            v-for="it in dataArray.drivingCycle"
            :key="it.id"
            >{{ it.name }}</Option
          >
        </Select>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { environmentApi } from "@/api/environment";
import { drivingCycleApi } from "@/api/driving-cycle";
import { roadApi } from "@/api/road";
import { atmosphereApi } from "@/api/atmosphere";
import { fileApi } from "@/api/file";
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/lib/cookie";
export default {
  name: "EnvironmentListForm",
  components: {},
  props: {
    // 是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true
    },
    // 更新的表单数据对象
    updateData: {
      type: Object
    }
  },
  data() {
    return {
      dataArray: {
        drivingCycle: [],
        road: [],
        atmosphere: []
      },
      // 表单数据
      form: {
        image: null,
        // 编号
        sn: null,
        // 气候环境id
        atmosphereId: null,
        // 路面id
        groupId: null,
        // 行驶工况id
        drivecycleId: null,
        // 创建人
        createUser: null,
        // 更新人
        updateUser: null,
        isIndexShow: 1,
        otherCanUse: 1
      },
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "blur" }],
        // 气候环境id
        atmosphereId: [
          {
            type: "number",
            required: true,
            message: "请输入气候环境",
            trigger: "blur"
          }
        ],
        // 路面id
        groupId: [
          {
            type: "number",
            required: true,
            message: "请输入路面",
            trigger: "blur"
          }
        ],
        // 行驶工况id
        drivecycleId: [
          {
            type: "number",
            required: true,
            message: "请输入行驶工况",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    updateData: function(newValue, oldValue) {
      this.$refs["form"].resetFields();
      if (this.isUpdate) {
        for (let k in this.form) {
          this.$set(this.form, k, newValue[k]);
        }
        this.$set(this.form, "id", newValue["id"]);
      }
    },
    isUpdate: function(newValue, oldValue) {
      if (!newValue) {
        this.resetForm();
        this.$refs["form"].resetFields();
      }
    },
    uploadHeader: function() {
      let header = {
        "x-access-token": Cookies.get(TOKEN_KEY)
      };
      return header;
    },
    uploadUrl: function() {
      let baseUrl = fileApi.fileUploadLocalUrl;
      switch (this.searchForm.fileLocationType) {
        case 2:
          baseUrl = fileApi.fileUploadAliUrl;
          break;
        case 3:
          baseUrl = fileApi.fileUploadQiNiuUrl;
          break;
        default:
          break;
      }
      let url = baseUrl + this.searchForm.moduleType;
      return url;
    },
    // 文件业务类型
    moduleTypes: function() {
      let array = [];
      for (let item in SERVICE_TYPE) {
        let obj = {};
        obj.desc = SERVICE_TYPE[item].desc;
        obj.value = SERVICE_TYPE[item].value;
        array.push(obj);
      }
      return array;
    },
    fileLocationTypes: function() {
      let array = [];
      for (const item in FILE_TYPE) {
        let obj = {};
        obj.desc = FILE_TYPE[item].desc;
        obj.value = FILE_TYPE[item].value;
        array.push(obj);
      }
      return array;
    }
  },
  created() {
    this.downloadFileUrl = fileApi.fileUploadLocalUrl + "1";
    this.getDataArray();
  },
  mounted() {},
  methods: {
    getDataArray() {
      let params = {
        pageNum: 1,
        pageSize: 100
      };
      drivingCycleApi.queryDrivingCycle(params).then(result => {
        this.dataArray.drivingCycle = result.data.list;
      });

      roadApi.queryRoad(params).then(result => {
        this.dataArray.road = result.data.list;
      });

      atmosphereApi.queryAtmosphere(params).then(result => {
        this.dataArray.atmosphere = result.data.list;
      });
    },
    beforeUpload() {
      this.$refs.upload.clearFiles();
    },
    handleSuccess(res, file) {
      console.log(file);
      console.log(res);

      this.form.image = res.data.url;
    },
    // 上传失败钩子
    uploadError(e) {
      this.$Message.error("上传出错，请重试！");
      console.error(e);
      this.find();
    },
    cancel() {
      this.resetForm();
      this.$emit("on-form-close");
    },
    save() {
      console.log(this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.update();
          } else {
            this.add();
          }
        } else {
          this.$Message.error("参数验证错误，请仔细填写表单数据!");
        }
      });
    },
    resetForm() {
      this.form = {
        // id
        id: null,
        // 编号
        sn: null,
        // 气候环境id
        atmosphereId: null,
        // 路面id
        groupId: null,
        // 行驶工况id
        drivecycleId: null,
        // 创建人
        createUser: null,
        // 更新人
        updateUser: null,
        isIndexShow: 1,
        otherCanUse: 1
      };
      this.$refs["form"].resetFields();
    },
    async add() {
      this.$Spin.show();
      let res = await environmentApi.addEnvironment(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    },
    async update() {
      this.$Spin.show();
      let res = await environmentApi.updateEnvironment(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
    }
  }
};
</script>

<style>
.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}

.tab-detail span {
  color: #000 !important;
}

.tab-detail i {
  display: none !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
